<template>
  <div class="add">
    <div class="content">
      <div class="content_one">
        <div class="consignee">收货人</div>
        <input type="text" name="" id="" value="" placeholder="输入收货人姓名" v-model="name">
      </div>
      <div class="content_two">
        <div class="phone">手机号码</div>
        <input type="text" name="" id="" value="" placeholder="输入电话号码"  v-model="phone">
      </div>
      <div class="content_three">
        <div class="phone">所在区域</div>
        <span @click.stop="go_choice">{{addressData}}</span>
      </div>
      <div class="content_four">
        <div class="address">详细地址</div>
        <input type="text" name="" id="" value="" placeholder="街道、楼牌号等详细地址" v-model="address">
      </div>
    </div>
    <div class="content_five">
      <div class="box"><input type="checkbox" v-model="checked" ></div>
      <span>设为默认收货地址</span>
    </div>
    <div class="preservation" @click="go_address">保存</div>
    <!-- 遮罩层 -->
      <van-overlay :show="showModel" @click.stop="cancelModel" >
        <div class="wrapper" @click.stop><!--点不动是这个地方导致的 @click.stop这个东西阻止了点击事件-->
          <div class="block">
             <van-area title="选择地区" :area-list="areaList" value="110101" @confirm="confirm" @cancel="cancel" />
          </div>
        </div>
      </van-overlay>
  </div>
</template>

<script>
import { areaList } from '@vant/area-data'
export default {
  name: 'add',
  data() {
    return {
      areaList,
      showModel: false,
      name: '',
      address: '',
      phone: '',
      addressData: '选择所在省份、城市区县',
      checked: false,
    }
  },
  methods: {
    go_choice() {
      this.showModel = true
    },
    confirm(e) {
      const cityData = e
      this.showModel = false
      const addressData = cityData[0].name + cityData[1].name + cityData[2].name
      this.addressData = addressData
    },
    cancel() {
      this.showModel = false
    },
    go_address() {
      const addressData = {
        id: new Date().getTime(),
        username: this.name,
        tel: this.phone,
        address: this.address,
        cityData: this.addressData,
        default: this.checked,
        checked: this.checked,
      }
      if (addressData.address === '') {
        this.$toast({
          type: 'fail',
          message: '请输入详细地址',
        })
        return false
      }
      const pnum = /^13|15|17|18|19[0-9]{8}$/
      const nameZZ = /^(?:[\u4e00-\u9fa5·]{2,16})$/
      if (!nameZZ.test(addressData.username)) {
        this.$toast({
          type: 'fail',
          message: '请填写2-16个中文名称',
        })
        return false
      }
      if (!pnum.test(addressData.tel)) {
        this.$toast({
          type: 'fail',
          message: '号码格式不正确',
        })
        return false
      }
      this.$store.commit('address/addRess', addressData)
      this.name = ''
      this.phone = ''
      this.address = ''
      this.phone = ''
      this.checked = ''
      console.log(addressData)
      this.$router.back()
    },
  },
}
</script>

<style lang="scss" scoped>
.add{
  width: 100%;
  height: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  background-color: rgba(249, 249, 249, 1);
  .content{
  height: 280px;
  border: 1px solid #dedede;
  background-color: white;
  font-size: 13px;
  color: #999999;
  .content_one{
    height: 58px;
    border-bottom: 1px solid #dedede;
    display: flex;
    align-items: center;
    .consignee{
      width: 86px;
      margin-left: 15px;
    }
    input{
      width: 230px;
      height: 58px;
      display: flex;
      align-items: center;
      border: none;
    }
  }
  .content_two{
    height: 58px;
    border-bottom: 1px solid #dedede;
    display: flex;
    align-items: center;
    .phone{
      width: 86px;
      margin-left: 15px;
    }
    input{
      width: 230px;
      height: 48px;
      display: flex;
      align-items: center;
      border: none;
    }
  }
  .content_three{
    height: 60px;
    border-bottom: 1px solid #dedede;
    display: flex;
    align-items: center;
    .phone{
      width: 86px;
      margin-left: 15px;
    }
    span{
      width: 156px;
    }
  }
  .content_four{
    height: 68px;
    display: flex;
    align-items: center;
    .address{
      width: 86px;
      margin-left: 15px;
    }
     input{
      width: 230px;
      height: 58px;
      display: flex;
      align-items: center;
      border: none;
    }
  }
  }
  .content_five{
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    .box{
      padding-left: 30px;
      box-sizing: border-box;
    }
    span{
      font-size: 13px;
      color: #999999;
      margin-left: 8px;
    }
  }
  .preservation{
    width: 335px;
    height: 45px;
    font-size: 15px;
    color: white;
    background-color: #1ABC9C;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .wrapper {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 100%;
    height: 300px;
    background-color: #fff;
  }
}
</style>
